<template>
    <div>
        <div style="height: auto;width: 100%;width:87%;margin:0 auto;">
            <div style="margin-top: 2vw;">
                <p
                    style="margin-top:1.8vw;font-size:1.2vw;color: #7A7A7A;font-family: DengXian"
                >Personal Center</p>
                <p
                    style="margin-top:0.1vw;font-size:2vw;color: #44519E;font-weight: bold;font-family: DengXian"
                >{{info.nickname}}</p>
                <div style="margin-top:0.6vw;width: 10vw;height: 0.2vw;background-color:#45529F"></div>
            </div>
        </div>

        <div class="bj-vis"></div>

        <div style="height: auto;width: 100%;width:87%;margin:0 auto;margin-top:15vw">
            <Row>
                <i-col span="3">
                    <img
                        style="width: 5.5vw;margin-top: -1vw;margin-left:0.8vw; border-radius: 3vw;border:#2b85e4 2px solid;"
                        :src="info.picture"
                    >
                </i-col>
                <i-col span="13" style="margin-top:0.4vw"></i-col>
                <i-col span="8" style="margin-top:0.8vw;text-align:right;">
                    <!-- <Button type="error" style="width:6vw" icon="md-close">黑 名 单</Button> -->
                    <Button
                        v-if="isfollow==false"
                        type="primary"
                        style="width:7vw;margin-left:0.5vw;margin-right:1vw"
                        icon="md-add"
                        v-on:click="follow(info.id)"
                    >关 注</Button>
                    <Button
                        v-else
                        type="primary"
                        style="width:7vw;margin-left:0.5vw;margin-right:1vw"
                        v-on:click="AntiFollow(info.id)"
                    >取 消 关 注</Button>
                </i-col>
            </Row>

            <h2 style="margin-top: 2vw;">展示板</h2>

            <Timeline style="margin-top:1vw">
                <TimelineItem v-for="(movement,index) in pictures" :key="index">
                    <p style="font-size:0.8vw;font-family: DengXian">{{movement.time}}</p>
                    <p style="font-size:0.9vw;font-family: DengXian;">{{movement.title}}</p>
                    <div
                        style="width: 88%;margin: auto;column-count:4;column-gap:15px;column-fill:auto;"
                    >
                        <div
                            v-for="(picture,index) in movement.path"
                            :key="index"
                            :picture="picture"
                        >
                            <div class="picPerHubStyle">
                                <div class="picPerHub" :style="'backgroundImage:url('+picture+')'"></div>
                            </div>
                        </div>
                    </div>
                </TimelineItem>
            </Timeline>
        </div>
    </div>
</template>
<script>
import picVis from "./picture/picVis.vue";
export default {
  data() {
    return {};
  },
  components: {
    picVis
  },
  props: {
    info: {
      type: Object,
      default: function() {
        return {};
      }
    },
    isfollow: {
      type: Boolean,
      default: false
    },
    pictures: {
      type: Array,
      default: function() {
        return [];
      }
    }
  },
  mounted() {
    let _this = this;
    let Params = new URLSearchParams();
    Params.append("userId", this.info.id);
    this.http.post(this, "/getOtherMovement", Params).then(function(msg) {});
  },
  methods: {
    follow(id) {
      let _this = this;
      let Params = new URLSearchParams();
      Params.append("username", id);
      this.http.post(this, "/Follow", Params).then(function(msg) {
        if (msg.data.code === "200") {
          _this.$Message.success("关注成功");
          _this.isfollow = true;
        }
      });
    },
    AntiFollow(id) {
      let _this = this;
      let Params = new URLSearchParams();
      Params.append("username", id);
      this.http.post(this, "/CancelFollow", Params).then(function(msg) {
        if (msg.data.code === "200") {
          _this.$Message.success("取消成功");
          _this.isfollow = false;
        }
      });
    }
  }
};
</script>

<style>
.bj-vis {
  background-image: url(../assets/024.jpg);
  background-repeat: no-repeat;
  background-position: center center;
  background-size: cover;
  width: 100%;
  height: 13vw;
  position: absolute;
  right: 0;
  left: 0;
  margin-top: 2vw;
}

.picPerHub {
  background-image: url(../assets/l-bj.jpg);
  background-repeat: no-repeat;
  background-position: center center;
  background-size: cover;
  width: 12vw;
  height: 12vw;
  border-radius: 10px;
}

.picPerHubStyle {
  margin-top: 18px;
  display: inline-block;
}

.picPerHubStyle img {
  width: 1vw;
  vertical-align: middle;
}

.picPerHubStyle span {
  margin-left: 0.8vw;
  font-size: 0.9vw;
  color: #1e1e1e;
  font-family: DengXian;
}
</style>